<template>
  <header class="border-bottom flex-center">
    <div class="title">
      <p class="p-text">广东海洋大学 - 问卷系统</p>
      <!-- <router-link to="/login">
        <span>退出登录</span>
      </router-link> -->
      <button @click="outLogin">退出登录</button>
    </div>
  </header>

  <div class="home-content">
    <nav class="border-right">
      <router-link to="/new-survey" class="btn-light" active-class="link-active">
        <span class="svg">
          <svg t="1657634658108" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="2437" width="200" height="200">
            <path
              d="M500.48 106.1888a416.9728 416.9728 0 1 0 416.9728 416.9728 417.4336 417.4336 0 0 0-416.9728-416.9728z m0 767.6928a350.72 350.72 0 1 1 350.72-350.72 350.72 350.72 0 0 1-350.72 350.72z"
              p-id="2438"></path>
            <path d="M661.76 553.8816h-322.56a30.72 30.72 0 1 1 0-61.44h322.56a30.72 30.72 0 1 1 0 61.44z" p-id="2439">
            </path>
            <path
              d="M500.48 715.1616a30.72 30.72 0 0 1-30.72-30.72v-322.56a30.72 30.72 0 0 1 61.44 0v322.56a30.72 30.72 0 0 1-30.72 30.72z"
              p-id="2440"></path>
          </svg>
        </span>
        <span class="text-padding">新建问卷</span>
      </router-link>
      <router-link to="/home/survey" class="home-nav-item flex-center hover-light my-survey" active-class="link-active">
        <span class="svg">
          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
            class="coral-icon coral-icon-personal_survey_line icon">
            <path fill-rule="evenodd" clip-rule="evenodd"
              d="M11.927 2a5 5 0 100 10 5 5 0 000-10zm0 2c1.654 0 3 1.346 3 3s-1.346 3-3 3-3-1.346-3-3 1.346-3 3-3zM12 13c4.633 0 8.448 3.5 8.945 8H18.93a7.001 7.001 0 00-13.858 0H3.055c.497-4.5 4.312-8 8.945-8z">
            </path>
            <path d="M4 22a1 1 0 100-2 1 1 0 000 2zM20 22a1 1 0 100-2 1 1 0 000 2z"></path>
          </svg>
        </span>
        <span class="text-padding">我的问卷</span>
      </router-link>
      <router-link to="/home/recycle-bin" class="home-nav-item flex-center hover-light my-survey"
        active-class="link-active">
        <span class="svg">
          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
            class="coral-icon coral-icon-personal_survey_line icon">
            <path fill-rule="evenodd" clip-rule="evenodd"
              d="M11.927 2a5 5 0 100 10 5 5 0 000-10zm0 2c1.654 0 3 1.346 3 3s-1.346 3-3 3-3-1.346-3-3 1.346-3 3-3zM12 13c4.633 0 8.448 3.5 8.945 8H18.93a7.001 7.001 0 00-13.858 0H3.055c.497-4.5 4.312-8 8.945-8z">
            </path>
            <path d="M4 22a1 1 0 100-2 1 1 0 000 2zM20 22a1 1 0 100-2 1 1 0 000 2z"></path>
          </svg>
        </span>
        <span class="text-padding">回收站</span>
      </router-link>
    </nav>
    <main>
      <router-view></router-view>
    </main>
  </div>
</template>
<script>
export default {
  methods: {
    outLogin() {
      // console.log(123);
      window.localStorage.removeItem('usertoken')
      this.$router.replace('/login')
    }
  },
}
</script>

<style lang="scss" scoped>
header {
  height: 80px;

  background-color: #fff;

  .title {
    margin-left: 20px;
    font-size: 24px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: space-between;

    button {
      margin-right: 30px;
    }

  }
}

.home-content {
  $nav-w: 180px;
  height: calc(100vh - 80px);

  position: relative;
  overflow: hidden;

  display: flex;

  >nav {
    flex: 0 0 auto;
    width: $nav-w;
    height: 100%;

    background-color: #fff;

    .btn-light {
      margin: 20px auto;
      width: 130px;
      height: 34px;

      font-size: 14px;
    }

    >.home-nav-item {
      width: 100%;
      height: 50px;
      padding-left: 10px;

      .svg {
        width: 20px;
        height: 20px;
      }
    }
  }

  >main {
    flex: 0 0 auto;
    width: calc(100% - $nav-w);
  }
}
</style>
